<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
        <title>系统监控-系统日志</title>
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content">
            <div class="col-sm-12 content-title-fixed">
                <div class="btn-group-sm" role="group">
                    <a class="btn btn-success" id="start_btn" onclick="startPoll()">
                        <i class="fa fa-play"></i> 开始查询
                    </a>
                    <a class="btn btn-danger disabled" id="stop_btn" onclick="stopPoll()">
                        <i class="fa fa-stop"></i> 停止查询
                    </a>
                </div>
            </div>
            <div class="col-sm-12 mt40 mb20">
                <div id="log-container" style="overflow-y: scroll; background: #333; color: #aaa; min-height: 300px;">
                    <div></div>
                </div>
            </div>
        </div>

        <div th:replace="/common/include :: footer"></div>
        <div th:replace="/common/include :: socketJs"></div>

        <script th:inline="javascript">
            var layer_index = [[${layer_index}]];
            var layer_callback = [[${layer_callback}]];
            var site_path = [[${path}]];
            var stompClient = null;
            var stopFlag = false;

            $(function () {
                startPoll();
                openSocket();
                window.onunload = closeWin;
            });

            function openSocket() {
                if (stompClient == null) {
                    var socket = new SockJS(site_path + '/stomp');
                    //使用STMOP子协议的WebSocket客户端
                    stompClient = Stomp.over(socket);
                    //连接WebSocket服务端
                    stompClient.connect({}, function(frame) {
                        stompClient.subscribe('/topic/pullLogger', function(event) {
                            var content = JSON.parse(event.body);
                            if (!content.exception) {
                                content.exception = content.body;
                            }
                            $('#log-container div').append(content.timestamp + ' ' + content.level + ' --- [' + content.threadName + '] ' + content.className + ' :');
                            if (content.level == 'ERROR') {
                                $('#log-container div').append('<span class="red">' + content.exception + '</span>');
                            } else {
                                $('#log-container div').append(content.exception);
                            }
                            $('#log-container div').append('<br/>');

                            $('.white-bg')[0].scrollTop = $('#log-container').height();
                        });
                    });
                }
            }

            function startPoll() {
                stopFlag = false;
                $('#start_btn').toggleClass('disabled');
                $('#stop_btn').toggleClass('disabled');
                $.operate.get({
                    url: ctx + 'api/websocket/startPollLog',
                    success: function(result) {
                    },
                    error: function(result) {
                        stopFlag = true;
                        $('#start_btn').toggleClass('disabled');
                        $('#stop_btn').toggleClass('disabled');
                    }
                });
            }

            function stopPoll() {
                stopFlag = true;
                $('#start_btn').toggleClass('disabled');
                $('#stop_btn').toggleClass('disabled');
                $.operate.get({
                    url: ctx + 'api/websocket/stopPollLog',
                    success: function(result) {
                    },
                    error: function(result) {
                        stopFlag = false;
                        $('#start_btn').toggleClass('disabled');
                        $('#stop_btn').toggleClass('disabled');
                    }
                });
            }

            function closeSocket() {
                if (stompClient != null) {
                    stompClient.disconnect();
                    stompClient = null;
                }
            }

            function closeWin() {
                stopPoll();
                closeSocket();
            }
        </script>
    </body>
</html>
